<template>
	<!-- 查看订单 -->
	<view class="container" v-if="isloding">
		<view class="top">
			<view class="Choice">
				<view class="item" @tap="showOne" :class="{active:show==0}" style="border-top-left-radius:0upx;border-bottom-left-radius: 0upx;">
					待接中
				</view>
				<view class="item" @tap="showTwo" :class="{active:show==1}">
					进行中
				</view>
				<view class="item" @tap="showThree" :class="{active:show==2}">
					已完成
				</view>
				<view class="item" @tap="showFour" :class="{active:show==3}" style="border-bottom-right-radius: 0upx;border-top-right-radius: 0upx;">
					已取消
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box" v-for="(item,index) in info" :key="index">
				<view class="title" v-if="item.status==1">
					待接单
				</view>
				<view class="title" v-if="item.status==0">
					待支付
				</view>
				<view class="title" v-if="show==1">
					进行中
				</view>
				<view class="title" v-if="show==2">
					已完成
				</view>
				<view class="title" v-if="show==3">
					已取消
				</view>
				<view class="mid">
					<image :src="item.vehicle_info.type.cover_map" mode=""></image>
					<view class="right">
						<view class="name">
							{{item.vehicle_info.name}}/{{item.vehicle_info.type.name}}
						</view>
						<view class="load">
							载货吨位:{{item.vehicle_info.type.parameter.tonnage}}
						</view>
						<view class="volume">
							车辆尺寸:{{item.vehicle_info.type.parameter.size}}
						</view>
						<view class="Specifications">
							吊重吨位:{{item.vehicle_info.type.parameter.load}}
						</view>
						<!-- <view class="load">
							臂展长度:{{item.vehicle_info.type.parameter.arm_length}}
						</view>
						<view class="load">
							货箱体积:{{item.vehicle_info.type.parameter.container_volume}}
						</view>
						<view class="load">
							载货空间:{{item.vehicle_info.type.parameter.cargo_space}}
						</view>
						<view class="load">
							应用场景介绍:{{item.vehicle_info.type.parameter.introduce}}
						</view> -->
					</view>
				</view>
				<view class="btns" v-if="show==0">
					<view class="cancel" @tap="cancelqx(item)">
						取消订单
					</view>
					<view class="details" @tap="goOrderDetails(item)">
						订单详情
					</view>
					<view class="pay" v-if="item.status==0" @tap="goPay(item)">
						去支付
					</view>
				</view>
				<view class="btns" v-if="show==1">
					<view class="cancel" @tap="cancelqx(item)" v-if="item.status==2||item.status==10||item.status==20||item.status==30">
						取消订单
					</view>
					<view class="cancel" @tap="Settlement(item)" v-if="item.status==12||item.status==22||item.status==34">
						结算
					</view>
					<view class="cancel" @tap="weiwancheng" style="background: #b5b5b5;" v-if="item.status!=12&&item.status!=22&&item.status!=34">
						结算
					</view>
					<view class="details" @tap="goDetailsMid(item)">
						订单详情
					</view>
				</view>
				<view class="btns" v-if="show==2">
					<view class="cancel" @tap="goEvaluate(item)" v-if="item.status!=5">
						去评价
					</view>
					<view class="cancel" style="background: #b5b5b5;" v-if="item.status==5">
						已评价
					</view>
					<view class="details" @tap="goComplete(item)">
						订单详情
					</view>
				</view>
				<view class="btns" v-if="show==3">
					<!-- <view class="cancel">
						删除订单
					</view> -->
					<view class="details"  @tap="goCancel(item)">
						订单详情
					</view>
				</view>
			</view>
		</view>
		<view class="payment" v-if="paySelect">
			<view class="paymentez">
				<view class="title">
					订单超时,请选择支付方式
				</view>
				<view class="itemBox">
					<view class="item" @tap="payOne">
						<image src="../../static/yue.png" mode=""></image>
						<view class="text">
							余额支付
						</view>
						<view class="quan">
							<view class="Selection" v-if="payNum==20">
								
							</view>
						</view>
					</view>
					<view class="item" @tap="payTwo">
						<image src="../../static/icon/wechat.png" mode=""></image>
						<view class="text">
							微信支付
						</view>
						<view class="quan">
							<view class="Selection" v-if="payNum==2">
								
							</view>
						</view>
					</view>
					<view class="item" @tap="payThree">
						<image src="../../static/alipay.png" mode=""></image>
						<view class="text">
							支付宝支付
						</view>
						<view class="quan">
							<view class="Selection" v-if="payNum==10">
								
							</view>
						</view>
					</view>
				</view>
				<view class="payBtn">
					<view class="qx" @tap="CancellationPayment">
						取消支付
					</view>
					<view class="qx" @tap="confirmPayment">
						确认支付
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: 0,
				info:[],
				isloding:false,
				token:'',
				payNum:20  ,//支付方式   20为余额  2为微信 10为支付宝
				paySelect:false,//支付选择弹窗
				reid:-1   ,//	超时订单id
				page:1
			};
		},
		onShow() {
			if(this.isloding){
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				uni.request({
					url: this.webUrl+'/user/job/index',
					method: 'GET',
					header:{
						token:this.token
					},
					data: {
						status:this.show,
						page:1
					},
					success: res => {
						// console.log(res)
						uni.hideLoading()
						this.isloding=true
						if(res.data.code==0){
							this.info=res.data.data
						}else if(res.data.code==3){
							uni.showToast({
								title: res.data.msg,
								icon:'none',
								duration:2000
							});
						}else{
							uni.showToast({
								title: '网络错误',
								icon:'none',
								duration:2000
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					},
					complete: () => {}
				});
			}
		},
		onLoad(e) {
			// console.log(e)
			this.show=e.id
			this.token=e.token
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			uni.request({
				url: this.webUrl+'/user/job/index',
				method: 'GET',
				header:{
					token:e.token
				},
				data: {
					status:e.id,
					page:1
				},
				success: res => {
					// console.log(res)
					uni.hideLoading()
					this.isloding=true
					if(res.data.code==0){
						this.info=res.data.data
					}else if(res.data.code==3){
						uni.showToast({
							title: res.data.msg,
							icon:'none',
							duration:2000
						});
					}else{
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					}
				},
				fail: () => {
					uni.showToast({
						title: '网络错误',
						icon:'none',
						duration:2000
					});
				},
				complete: () => {}
			});
		},
		onReachBottom() {
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			this.page++
			uni.request({
				url: this.webUrl+'/user/job/index',
				method: 'GET',
				header:{
					token:this.token
				},
				data: {
					status:this.show,
					page:this.page
				},
				success: res => {
					uni.hideLoading()
					if(res.data.code==0){
						if(res.data.data.length==0){
							uni.showToast({
								title: '没有更多了',
								icon:'none'
							});
						}else{
							let arr=res.data.data.map(item=>{
								this.info.push(item)
							})
						}
					}else if(res.data.code==3){
						uni.showToast({
							title: res.data.msg,
							icon:'none',
							duration:2000
						});
					}else{
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					}
				},
				fail: () => {
					uni.showToast({
						title: '网络错误',
						icon:'none',
						duration:2000
					});
				},
				complete: () => {}
			});
		},
		methods: {
			goPay(item){
				console.log(item)
				uni.request({
					url: this.webUrl+'/user/pay/index',
					method: 'GET',
					data: {
						id:item.id
					},
					success: payInfo => {
						console.log(payInfo)
						if(payInfo.data.code==0){  //调取支付
							if(item.way==20){
								uni.showToast({
									title: '下单成功',
									icon:'none',
									duration:2000
								});
								setTimeout(()=>{
									uni.showLoading({
										title: '加载中',
										mask: false
									});
									uni.request({
										url: this.webUrl+'/user/job/index',
										method: 'GET',
										header:{
											token:this.token
										},
										data: {
											status:this.show,
											page:1
										},
										success: res => {
											// console.log(res)
											uni.hideLoading()
											this.isloding=true
											if(res.data.code==0){
												this.info=res.data.data
											}else if(res.data.code==3){
												uni.showToast({
													title: res.data.msg,
													icon:'none',
													duration:2000
												});
											}else{
												uni.showToast({
													title: '网络错误',
													icon:'none',
													duration:2000
												});
											}
										},
										fail: () => {
											uni.showToast({
												title: '网络错误',
												icon:'none',
												duration:2000
											});
										},
										complete: () => {}
									});
								},1500)
							}else if(item.way==2){
								uni.requestPayment({
								    provider: 'wxpay',
								    orderInfo: payInfo.data.data, //微信、支付宝订单数据
								    success: function (res) {
								        console.log('success:' + JSON.stringify(res));
										uni.showToast({
											title: '下单成功',
											icon:'none',
											duration:2000
										});
										setTimeout(()=>{
											uni.showLoading({
												title: '加载中',
												mask: false
											});
											uni.request({
												url: this.webUrl+'/user/job/index',
												method: 'GET',
												header:{
													token:this.token
												},
												data: {
													status:this.show,
													page:1
												},
												success: res => {
													// console.log(res)
													uni.hideLoading()
													this.isloding=true
													if(res.data.code==0){
														this.info=res.data.data
													}else if(res.data.code==3){
														uni.showToast({
															title: res.data.msg,
															icon:'none',
															duration:2000
														});
													}else{
														uni.showToast({
															title: '网络错误',
															icon:'none',
															duration:2000
														});
													}
												},
												fail: () => {
													uni.showToast({
														title: '网络错误',
														icon:'none',
														duration:2000
													});
												},
												complete: () => {}
											});
										},1500)
								    },
								    fail: function (err) {
								        console.log('fail:' + JSON.stringify(err));
										uni.showToast({
											title: '支付失败',
											icon:'none',
											duration:2000
										});
								    }
								});
							}else if(item.way==10){
								uni.requestPayment({
								    provider: 'alipay',
								    orderInfo: payInfo.data.data, //微信、支付宝订单数据
								    success: function (res) {
								        console.log('success:' + JSON.stringify(res));
										uni.showToast({
											title: '下单成功',
											icon:'none',
											duration:2000
										});
										setTimeout(()=>{
											uni.showLoading({
												title: '加载中',
												mask: false
											});
											uni.request({
												url: this.webUrl+'/user/job/index',
												method: 'GET',
												header:{
													token:this.token
												},
												data: {
													status:this.show,
													page:1
												},
												success: res => {
													// console.log(res)
													uni.hideLoading()
													this.isloding=true
													if(res.data.code==0){
														this.info=res.data.data
													}else if(res.data.code==3){
														uni.showToast({
															title: res.data.msg,
															icon:'none',
															duration:2000
														});
													}else{
														uni.showToast({
															title: '网络错误',
															icon:'none',
															duration:2000
														});
													}
												},
												fail: () => {
													uni.showToast({
														title: '网络错误',
														icon:'none',
														duration:2000
													});
												},
												complete: () => {}
											});
										},1500)
								    },
								    fail: function (err) {
								        console.log('fail:' + JSON.stringify(err));
										uni.showToast({
											title: '支付失败',
											icon:'none',
											duration:2000
										});
								    }
								});
							}
						}else if(payInfo.data.code==3){
							uni.showToast({
								title: payInfo.data.msg,
								icon:'none',
								duration:2000
							});
						}else{
							uni.showToast({
								title: '网络错误',
								icon:'none',
								duration:2000
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误,支付失败',
							icon:'none',
							duration:2000
						});
					},
					complete: () => {}
				});
			},
			confirmPayment(){//结算确认支付
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				uni.request({
					url: this.webUrl+'/user/pay/wxOvertime',
					method: 'PUT',
					data: {
						id:this.reid,
						overtime_way:this.payNum
					},
					success: res => {
						console.log(res)
						if(res.data.code==0){
							this.paySelect=false
							if(this.payNum==20){
								uni.showToast({
									title: '支付成功',
									icon:'none',
									duration:2000
								});
								uni.request({    //支付成功结算重新刷新页面
									url: this.webUrl+'/user/job/index',
									method: 'GET',
									header:{
										token:this.token
									},
									data: {
										status:this.show,
										page:1
									},
									success: res => {
										// console.log(res)
										if(res.data.code==0){
											this.info=res.data.data
										}else if(res.data.code==3){
											uni.showToast({
												title: res.data.msg,
												icon:'none',
												duration:2000
											});
										}else{
											uni.showToast({
												title: '网络错误',
												icon:'none',
												duration:2000
											});
										}
									},
									fail: () => {
										uni.showToast({
											title: '网络错误',
											icon:'none',
											duration:2000
										});
									},
									complete: () => {}
								});
							}else if(this.payNum==2){
								uni.requestPayment({
								    provider: 'wxpay',
								    orderInfo: res.data.data, //微信、支付宝订单数据
								    success: function (res) {
								        console.log('success:' + JSON.stringify(res));
										uni.showToast({
											title: '支付成功',
											icon:'none',
											duration:2000
										});
										uni.request({    //支付成功结算重新刷新页面
											url: this.webUrl+'/user/job/index',
											method: 'GET',
											header:{
												token:this.token
											},
											data: {
												status:this.show,
												page:1
											},
											success: res => {
												// console.log(res)
												if(res.data.code==0){
													this.info=res.data.data
												}else if(res.data.code==3){
													uni.showToast({
														title: res.data.msg,
														icon:'none',
														duration:2000
													});
												}else{
													uni.showToast({
														title: '网络错误',
														icon:'none',
														duration:2000
													});
												}
											},
											fail: () => {
												uni.showToast({
													title: '网络错误',
													icon:'none',
													duration:2000
												});
											},
											complete: () => {}
										});
								    },
								    fail: function (err) {
								        console.log('fail:' + JSON.stringify(err));
										uni.showToast({
											title: '支付失败',
											icon:'none',
											duration:2000
										});
								    }
								});
							}else if(this.payNum==10){
								uni.requestPayment({
								    provider: 'alipay',
								    orderInfo: pay.data.data, //微信、支付宝订单数据
								    success: function (res) {
								        console.log('success:' + JSON.stringify(res));
										uni.showToast({
											title: '支付成功',
											icon:'none',
											duration:2000
										});
										uni.request({    //支付成功结算重新刷新页面
											url: this.webUrl+'/user/job/index',
											method: 'GET',
											header:{
												token:this.token
											},
											data: {
												status:this.show,
												page:1
											},
											success: res => {
												// console.log(res)
												if(res.data.code==0){
													this.info=res.data.data
												}else if(res.data.code==3){
													uni.showToast({
														title: res.data.msg,
														icon:'none',
														duration:2000
													});
												}else{
													uni.showToast({
														title: '网络错误',
														icon:'none',
														duration:2000
													});
												}
											},
											fail: () => {
												uni.showToast({
													title: '网络错误',
													icon:'none',
													duration:2000
												});
											},
											complete: () => {}
										});
								    },
								    fail: function (err) {
								        console.log('fail:' + JSON.stringify(err));
										uni.showToast({
											title: '支付失败',
											icon:'none',
											duration:2000
										});
								    }
								});
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			CancellationPayment(){ //取消支付
				this.paySelect=false
			},
			payOne(){
				if(this.payNum==20){
					this.payNum=-1
				}else{
					this.payNum=20
				}
			},
			payTwo(){
				if(this.payNum==2){
					this.payNum=-1
				}else{
					this.payNum=2
				}
			},
			payThree(){
				if(this.payNum==10){
					this.payNum=-1
				}else{
					this.payNum=10
				}
			},
			cancelqx(item){  //取消订单
				uni.showModal({
					title: '取消订单',
					content: '是否要取消订单',
					success: (res)=> {
						if (res.confirm) {
						   uni.showLoading({
							title: '加载中',
							mask: false
						   });
						   uni.request({   //取消订单
							url: this.webUrl+'/user/job/action',
							method: 'PUT',
							header:{
								token:this.token
							},
							data: {
								id:item.id,
								status:4
							},
							success: res => {
								uni.hideLoading()
								// console.log(res)
								if(res.data.code==0){
									uni.showToast({
										title: '操作成功',
										icon:'none',
										duration:2000
									});
									uni.request({
										url: this.webUrl+'/user/job/index',
										method: 'GET',
										header:{
											token:this.token
										},
										data: {
											status:this.show,
											page:1
										},
										success: res => {
											// console.log(res)
											if(res.data.code==0){
												this.info=res.data.data
											}else if(res.data.code==3){
												uni.showToast({
													title: res.data.msg,
													icon:'none',
													duration:2000
												});
											}else{
												uni.showToast({
													title: '网络错误',
													icon:'none',
													duration:2000
												});
											}
										},
										fail: () => {
											uni.showToast({
												title: '网络错误',
												icon:'none',
												duration:2000
											});
										},
										complete: () => {}
									});
								}else if(res.data.code==3){
									uni.showToast({
										title: res.data.msg,
										icon:'none',
										duration:2000
									});
								}else{
									uni.showToast({
										title: '网络错误',
										icon:'none',
										duration:2000
									});
								}
							},
							fail: () => {},
							complete: () => {}
						   });
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			weiwancheng(){
				uni.showToast({
					title: '司机尚未完成订单，暂时无法完成',
					icon:'none',
					duration:2000
				});
			},
			Settlement(item){
				//结算订单
				// console.log(item)
				uni.showModal({
					title: '结算订单',
					content: '是否要结算订单',
					success: (res)=> {
						if (res.confirm) {
						   uni.showLoading({
							title: '加载中',
							mask: false
						   });
						   uni.request({   //结算订单
							url: this.webUrl+'/user/job/action',
							method: 'PUT',
							header:{
								token:this.token
							},
							data: {
								id:item.id,
								status:3
							},
							success: res => {
								uni.hideLoading()
								// console.log(res)
								if(res.data.code==0){
									if(res.data.data.reid==0){
										uni.showToast({
											title: '操作成功',
											icon:'none',
											duration:2000
										});
										uni.request({
											url: this.webUrl+'/user/job/index',
											method: 'GET',
											header:{
												token:this.token
											},
											data: {
												status:this.show,
												page:1
											},
											success: res => {
												// console.log(res)
												if(res.data.code==0){
													this.info=res.data.data
												}else if(res.data.code==3){
													uni.showToast({
														title: res.data.msg,
														icon:'none',
														duration:2000
													});
												}else{
													uni.showToast({
														title: '网络错误',
														icon:'none',
														duration:2000
													});
												}
											},
											fail: () => {
												uni.showToast({
													title: '网络错误',
													icon:'none',
													duration:2000
												});
											},
											complete: () => {}
										});
									}else{   //调取支付
										this.paySelect=true
										this.reid=res.data.data.reid
										uni.showLoading({
											title: '加载中',
											mask: false
										});
										uni.request({
											url: this.webUrl+'/user/pay/index',
											method: 'GET',
											data: {
												id:res.data.data.reid
											},
											success: res => {
												// console.log(res)
												uni.hideLoading()
											},
											fail: () => {},
											complete: () => {}
										});
									}
								}else if(res.data.code==3){
									uni.showToast({
										title: res.data.msg,
										icon:'none',
										duration:2000
									});
								}else{
									uni.showToast({
										title: '网络错误',
										icon:'none',
										duration:2000
									});
								}
							},
							fail: () => {},
							complete: () => {}
						   });
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goCancel(item){
				uni.navigateTo({
					url: 'cancel/cancel?id='+item.id+'&token='+this.token+'&name='+item.vehicle_info.type.name,
					complete: () => {}
				});
			},
			goEvaluate(item){
				uni.navigateTo({
					url: 'evaluate/evaluate?info='+JSON.stringify(item)+'&token='+this.token,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goComplete(item){
				uni.navigateTo({
					url: 'complete/complete?id='+item.id+'&token='+this.token+'&name='+item.vehicle_info.type.name,
					complete: () => {}
				});
			},
			goOrderDetails(item){
				uni.navigateTo({
					url: '../orderDetails/orderDetails?id='+item.id+'&token='+this.token+'&name='+item.vehicle_info.type.name,
					complete: () => {}
				});
			},
			goDetailsMid(item){
				uni.navigateTo({
					url: 'detailsMid/detailsMid?id='+item.id+'&token='+this.token+'&name='+item.vehicle_info.type.name,
					fail: () => {},
					complete: () => {}
				});
			},
			showOne() {
				this.show = 0
				this.info=[]
				this.page=1
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				uni.request({
					url: this.webUrl+'/user/job/index',
					method: 'GET',
					header:{
						token:this.token
					},
					data: {
						status:this.show,
						page:1
					},
					success: res => {
						// console.log(res)
						uni.hideLoading()
						this.isloding=true
						if(res.data.code==0){
							this.info=res.data.data
						}else if(res.data.code==3){
							uni.showToast({
								title: res.data.msg,
								icon:'none',
								duration:2000
							});
						}else{
							uni.showToast({
								title: '网络错误',
								icon:'none',
								duration:2000
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					},
					complete: () => {}
				});
			},
			showTwo() {
				this.show = 1
				this.info=[]
				this.page=1
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				uni.request({
					url: this.webUrl+'/user/job/index',
					method: 'GET',
					header:{
						token:this.token
					},
					data: {
						status:this.show,
						page:1
					},
					success: res => {
						// console.log(res)
						uni.hideLoading()
						this.isloding=true
						if(res.data.code==0){
							this.info=res.data.data
						}else if(res.data.code==3){
							uni.showToast({
								title: res.data.msg,
								icon:'none',
								duration:2000
							});
						}else{
							uni.showToast({
								title: '网络错误',
								icon:'none',
								duration:2000
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					},
					complete: () => {}
				});
			},
			showThree() {
				this.show = 2
				this.info=[]
				this.page=1
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				uni.request({
					url: this.webUrl+'/user/job/index',
					method: 'GET',
					header:{
						token:this.token
					},
					data: {
						status:this.show,
						page:1
					},
					success: res => {
						// console.log(res)
						uni.hideLoading()
						this.isloding=true
						if(res.data.code==0){
							this.info=res.data.data
						}else if(res.data.code==3){
							uni.showToast({
								title: res.data.msg,
								icon:'none',
								duration:2000
							});
						}else{
							uni.showToast({
								title: '网络错误',
								icon:'none',
								duration:2000
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					},
					complete: () => {}
				});
			},
			showFour() {
				this.show = 3
				this.info=[]
				this.page=1
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				uni.request({
					url: this.webUrl+'/user/job/index',
					method: 'GET',
					header:{
						token:this.token
					},
					data: {
						status:this.show,
						page:1
					},
					success: res => {
						// console.log(res)
						uni.hideLoading()
						this.isloding=true
						if(res.data.code==0){
							this.info=res.data.data
						}else if(res.data.code==3){
							uni.showToast({
								title: res.data.msg,
								icon:'none',
								duration:2000
							});
						}else{
							uni.showToast({
								title: '网络错误',
								icon:'none',
								duration:2000
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		height: 100%;
	}

	page {
		height: 100%;
	}

	.container {
		position: absolute;
		left: 0;
		bottom: 0;
		top: 0;
		right: 0;
		background: #f2f2f2;

		.top {
			border-bottom-left-radius: 30upx;
			border-bottom-right-radius: 30upx;
			background: #FFFFFF;
			width: 100%;

			.Choice {
				display: flex;
				font-size: 28upx;
				color: #acacac;
				border-top: 2upx solid #e8e8e8;

				.item {
					width: 25%;
					text-align: center;
					padding: 12upx 0;
					border-radius: 34upx;
				}

				.active {
					background: #fe5621;
					color: #FFFFFF;
				}
			}
		}

		.content {
			margin: 30upx;
			border: 2upx solid #e8e8e8;
			border-radius: 30upx;
			box-shadow: 0upx 0upx 10upx 10upx #e8e8e8;
			background: #FFFFFF;

			.box {
				margin: 20upx 20upx 0;
				padding-bottom: 20upx;
				border-bottom: 2upx solid #ededed;

				.title {
					font-size: 32upx;
					color: #fe5d2b;
				}

				.mid {
					margin-top: 10upx;
					display: flex;

					image {
						width: 40%;
						height: 180upx;
					}

					.right {
						font-size: 28upx;
						margin-left: 30upx;

						.name {
							margin-bottom: 20upx;
						}
					}
				}

				.btns {
					margin-top: 10upx;
					display: flex;
					justify-content: flex-end;
					color: #FFFFFF;
					font-size: 24upx;

					.cancel {
						background: #fe5621;
						padding: 4upx 20upx;
						border-radius: 18upx;
						margin-right: 30upx;
					}

					.details {
						background: #fe5621;
						padding: 4upx 20upx;
						border-radius: 18upx;
					}
					.pay{
						background: #fe5621;
						padding: 4upx 20upx;
						border-radius: 18upx;
						margin-left: 30upx;
					}
				}
			}
		}
		.payment{
			position: fixed;  
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background: rgba(0,0,0,.6);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.paymentez{
				background: #FFFFFF;
				border-radius: 10upx;
				.title{
					text-align: center;
					padding: 30upx 0;
					font-size: 32upx;
				}
				.itemBox{
					.item{
						padding: 20upx;
						display: flex;
						width: 400upx;
						align-items: center;
						position: relative;
						.text{
							font-size: 32upx;
							padding-left: 30upx;
						}
						.quan{
							width: 32upx;
							height: 32upx;
							border-radius: 50upx;
							border: 2upx solid #000000;
							position: absolute;
							right: 20upx;
							.Selection{
								width: 20upx;
								height: 20upx;
								border-radius: 50%;
								background: rgba(254,86,33,1);
								margin: 6upx auto;
							}
						}
					}
					image{
						width: 50upx;
						height: 50upx;
					}
				}
				.payBtn{
					display: flex;
					margin-top: 30upx;
					padding: 0 20upx;
					margin-bottom: 20upx;
					justify-content: space-between;
					.qx{
						background: rgba(254,86,33,1);
						padding: 10upx;
						font-size: 32upx;
						color: #FFFFFF;
						border-radius: 10upx;
					}
				}
			}
		}
	}
</style>
